function weather(xName, yPoint) {
    var myChart = echarts.init(document.getElementById('weather'));
    const color = ['#FDC844', '#42FEB7', '#3C7EFF', '#8E51DA', '#FF5A5A']
    const legendData = ['降雨量', '温度', '风速']
    const xPoint = xName


    let series = []

    for (let i = 0; i < yPoint.length; i++) {
        let curData = yPoint[i]

        const obj = {
            name: legendData[i], // 每一条线对应的名称
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbolSize: 6,
            itemStyle: {
                color: color[i % color.length],
                borderWidth: 6,
                borderColor: 'rgba(51, 181, 255, .2)'
            },
            lineStyle: {
                normal: {
                    width: 2,
                    color: color[i % color.length] // 线条颜色
                }
            },
            label: {
                show: false,
                color: 'rgba(255,255,255, 0.6)'
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(103, 171, 249, 0.16)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(103, 171, 249, 0)'
                        }
                    ]
                }
            },
            data: curData
        }
        series.push(obj)
    }

    var option = {

        grid: {
            top: '11%',
            bottom: '12%',
            left: '5%',
            right: '5%'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 10,
                interval: 1, // 显示所有标签

                textStyle: {
                    color: '#fff'
                },
                formatter: function (value) {
                    // 通过空格将日期和时间分开
                    const [date, time] = value.split(' ');
                    return `{date|${date}}\n{time|${time}}`;
                },
                rich: {
                    date: {
                        color: '#fff',
                        fontSize: 10,
                    },
                    time: {
                        color: '#fff',
                        fontSize: 10,
                    }
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, .6)'
                }
            },
            splitLine: {
                // 网格线
                show: false
            },
            axisTick: {
                show: false
            },
            data: xPoint
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: 'rgba(255, 255, 255, .6)',
                fontSize: 12,
                textStyle: {
                    color: '#fff'
                }
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    width: 1,
                    color: 'rgba(255, 255, 255, 0.2)'
                }
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        legend: {
            data: legendData,
            left: 'center',
            // bottom: '2%',
            top: '1%',
            itemGap: 10,
            itemWidth: 10,
            itemHeight: 10,
            icon: 'rect',
            textStyle: {
                color: '#fff',
                fontSize: 12,
                rich: {
                    a: {
                        verticalAlign: 'middle'
                    }
                },
                padding: [0, 0, -2, 0]
            }
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgb(33, 85, 154, .6)',
            borderWidth: 1,
            borderColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: 'rgba(85, 149, 233, .6)' // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: 'rgba(85, 149, 233, 0)' // 100% 处的颜色
                    }
                ],
                global: false // 缺省为 false
            },
            padding: 8,
            textStyle: {
                color: '#fff'
            },
            axisPointer: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(255, 255, 255, .6)'
                }
            },
            extraCssText: 'box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)',
            formatter: function (params) {
                let content = `<div style='font-size: 14px; color: #fff;'>${params[0].name}</div>`
                if (Array.isArray(params)) {
                    for (let i = 0; i < params.length; i++) {
                        content += `
                  <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #fff;'>
                    <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
                    <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
                    <div style='font-size: 14px;'>${params[i].value}</div>
                  </div>
                `
                    }
                }
                return content
            }
        },
        series: series
    };
    myChart.setOption(option);
}

export {
    weather
}